<style lang="scss" scoped>
    @import '../../css/study-plan.scss';

    .paper-all-box{padding: 36px 30px 40px;background: #fff;}
    .head-box{border:1px solid #eee;}
    .info-title{padding: 18px 18px;background: #fcfdff;border-bottom: 1px solid #eee;font-weight: bold;}
    .info-box{padding: 18px 18px;}
    .info-box span{padding-right: 20px;}
    .paper-box{padding: 60px 0 0 10px;}
    .paper-title{font-weight: bold;font-size: 16px;}
    .p-relative{padding-top: 10px;}
    .question-topic{position: relative;padding-right: 80px;}
    .question-score{position: absolute;right: 0;top:0;color: #999;}
    .question-options{padding-left: 30px;}
    .question-down{padding: 10px 30px;background: #fcfdff;border: 1px solid #eee;}
    .question-down-left{padding-right: 40px;}
    .question-down-tick{font-weight: bold;color: #3BA514;font-size: 16px;}
    .question-down-wrong{font-weight: bold;color: #f00;font-size: 16px;}
</style>

<template>
    <section>
        <div class="breadcrumb-box">
            <el-breadcrumb separator=" > ">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta">{{$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="paper-all-box">
            <div class="head-box">
                <div class="info-title">学员个人信息</div>
                <div class="info-box">
                    <span>姓名 {{baseInfo.Username}}</span>
                    <span>工号 {{baseInfo.EmployeeNo}}</span>
                    <span>手机 {{baseInfo.Mobile}}</span>
                </div>
            </div>
            <div class="paper-box">
                <div class="paper-title">{{studyTitle}}</div>
                <ul>
                    <template v-for="one,index in list">
                        <li v-if="one.QuestionType==2" class="p-relative">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>Q{{index+1}}</span>
                                    <span>【单选题】</span>
                                    <span>{{one.QuestionTitle}}</span>
                                    <!--<span class="question-score">（{{one.RightScore}}分）</span>-->
                                </p>
                                <ul class="question-options">
                                    <el-radio-group v-model="one.MemberAnswerIndexs">
                                        <template v-for="item,index1 in one.Answers">
                                            <li class="mt20 fs-14">
                                                <el-radio :label="String(index1)" disabled>{{letterArr[index1]}}<span class="ml20"></span>{{item.AnswerValue}}</el-radio>
                                            </li>
                                        </template>
                                    </el-radio-group>
                                </ul>
                                <!--<div class="question-down clearfix mt20">-->
                                    <!--<span class="fs-14 question-down-left fl fs-14">学员回答∶{{letterArr[one.MemberAnswerIndexs]}}</span>-->
                                    <!--<span>-->
                                        <!--<i class="el-icon-check question-down-tick" v-show="one.GetScore!=0"></i>-->
                                        <!--<i class="el-icon-close question-down-wrong" v-show="one.GetScore==0"></i>（得{{one.GetScore}}分)-->
                                    <!--</span>-->
                                <!--</div>-->
                            </div>
                        </li>
                        <li v-if="one.QuestionType==1" class="p-relative">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>Q{{index+1}}</span>
                                    <span>【多选题】</span>
                                    <span>{{one.QuestionTitle}}</span>
                                    <!--<span class="question-score">（{{one.RightScore}}分）</span>-->
                                </p>
                                <ul class="question-options">
                                    <el-checkbox-group v-model="one.MemberAnswerIndexArr">
                                        <template v-for="item,index1 in one.Answers">
                                            <li class="mt20 fs-14">
                                                <el-checkbox :label="String(index1)" disabled>{{letterArr[index1]}}<span class="ml20"></span>{{item.AnswerValue}}</el-checkbox>
                                            </li>
                                        </template>
                                    </el-checkbox-group>
                                </ul>
                                <!--<div class="question-down clearfix mt20">-->
                                    <!--<span class="fs-14 question-down-left fl fs-14">学员回答∶{{one.MemberAnswer.join(',')}}</span>-->
                                    <!--<span>-->
                                        <!--<i class="el-icon-check question-down-tick" v-show="one.GetScore!=0"></i>-->
                                        <!--<i class="el-icon-close question-down-wrong" v-show="one.GetScore==0"></i>（得{{one.GetScore}}分)-->
                                    <!--</span>-->
                                <!--</div>-->
                            </div>
                        </li>
                        <li v-if="one.QuestionType==3" class="p-relative">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>Q{{index+1}}</span>
                                    <span>【问答题】</span>
                                    <span>{{one.QuestionTitle}}</span>
                                </p>
                                <div class="question-down clearfix mt20">
                                    <span class="fs-14 question-down-left fl fs-14">学员回答∶{{one.SubmitAnswer}}</span>
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </section>
</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            studyTitle:this.$route.query.studyTitle,
            examID:this.$route.query.examID,
            employeeID:this.$route.query.employeeID,
            letterArr:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q'],
            baseInfo:{},
            list: []
        }
    },
    mixins: [mixinMethods],
    methods: {

    },
    mounted: function(){
        axios.post('/com/exam/getMemberQNRExamResult', qs.stringify({
            examID:this.examID,
            employeeID:this.employeeID
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.baseInfo = d.data;
                this.list = d.data.Questions;
                this.list.forEach(item=>{
                    if(item.MemberAnswerIndexs!=''){
                        item.MemberAnswerIndexArr=item.MemberAnswerIndexs.split(',');
                    }
                })
            }else {
                this.$message.error(d.msg)
            }
        })
    }
}


</script>